<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery选择器练习1</title>
    <style>
        img,
        #one span {
            width: 150px;
            height: 150px;
            border-radius: 75px;
            float: left;
            margin: 20px 10px;
        }

        #one {
            height: 190px;
            background: #CCFFFF;
        }

        #one span {
            background: #FFCCCC;
            display: inline-block;
            font-size: 40px;
            line-height: 150px;
            text-align: center;
        }

        #two {
            clear: left;
            height: 30px;
            line-height: 30px;
            background: #FFCCCC;
        }

        .hide {
            font-size: 14px;
            display: none;
        }
    </style>
</head>



<body>
    <div class="baseBtn">
        <h2>基本选择器</h2>
        <button class="baseOne">取id为one的元素</button>
        <button class="baseMini">取class为mini的元素</button>
        <button class="baseDiv">取所有的div元素</button>
        <button class="baseSt">取所有span和id为two的元素</button>
        <h2>层次选择器</h2>
        <button class="levelSt">取div中的所有span元素</button>
        <button class="levelSpan">取div下元素名为span的子元素</button>
        <button class="levelOne">取id为one的下一个div元素</button>
        <button class="levelDiv">取id为one后面的所有div兄弟元素</button>
        <button class="levelSib">取id为two所有的同辈div元素</button>
        <h2>过滤选择器</h2>
        <button class="filterFirst">取第一个span元素</button>
        <button class="filterLast">取最后一个span元素</button>
        <button class="filterMini">取class不是mini的img元素</button>
        <button class="filterEven">取索引是奇数的span元素</button>
        <button class="filterOdd">取索引是偶数的span元素</button>
        <button class="filteEq">取索引值等于1的span元素</button>
        <button class="filteGt">取索引值大于1的span元素</button>
        <button class="filteLt">取索引值小于1的span元素</button>
        <button class="filteTitle">取网页中所有的h1h2等标题元素</button>
        <button class="filteAnimate">取网页中正在执行动画的元素</button>
        <h2>内容过滤选择器</h2>
        <button class="filteContains">选取含有文本like的div元素</button>
        <button class="filteEmpty">选取没有子元素的空的div元素</button>
        <button class="filteImg">选取含有img的div元素</button>
        <button class="filteParent">选取含有子元素的div元素</button>
        <h2>可见性过滤选择器</h2>
        <button class="filteHiden">选取所有不可见元素</button>
        <button class="filteVisible">选取所有可见元素</button>
        <h2>属性过滤选择器</h2>
        <button class="filteTit">选取含有属性title的img元素</button>
        <button class="filteTest">选取含有属性title值为test的img元素</button>
        <button class="filteImg">选取含有属性title值不为test的img元素</button>
        <button class="filteTe">选取含有属性title值以te开头的img元素</button>
        <button class="filteSt">选取含有属性title值以st结束的img元素</button>
        <button class="filteEs">选取含有属性title值含有的img元素</button>
        <button class="filteEsMinitwo">选取含有属性id并且title中含有es的img元素</button>
    </div>
    <div class="allBox">
        <div id="one">
            <img class="mini" src="./imgs/niuniu.jpg" alt="我的脸萌" title="脸萌做的" />
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <img class="miniTwo hide" id="miniTwo" src="./imgs/haozi.jpg" alt="逗比的脸萌" title="test">
        </div>
        <div id="two">I dont't have a type,if i like you ,i like you</div>
        <div id="three"></div>
        <div class="hide">Keep learning every day</div>
    </div>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/base.js"></script>
</body>

</html>